<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文字生成器</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #444;
        }
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 10px;
        }
        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.2s;
        }
        .radio-option:hover {
            background-color: #f0f0f0;
        }
        .radio-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: #4CAF50;
        }
        .file-upload {
            padding: 10px;
            border: 2px dashed #ddd;
            border-radius: 6px;
            text-align: center;
            transition: all 0.2s;
        }
        .file-upload:hover {
            border-color: #4CAF50;
            background-color: #f8fff8;
        }
        textarea {
            width: 90%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            font-size: 16px;
        }
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 0;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #preview {
            margin-top: 20px;
            text-align: center;
        }
        #preview img {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .loading {
            display: none;
            text-align: center;
            margin: 10px 0;
        }
        .error {
            color: #f44336;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片文字生成器</h1>
        
        <div class="form-group">
            <label for="textContent">输入要添加到图片的文字：</label>
            <textarea id="textContent" placeholder="在这里输入文字..."></textarea>
        </div>
        
        <div class="form-group">
            <label for="fontSize">选择字体大小：</label>
            <select id="fontSize">
                <option value="12">12px</option>
                <option value="16">16px</option>
                <option value="20">20px</option>
                <option value="24">24px</option>
                <option value="28">28px</option>
                <option value="32">32px</option>
                <option value="34">34px</option>
                <option value="36" selected>36px</option>
                <option value="40">40px</option>
                <option value="42">42px</option>
                <option value="44">44px</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="'font">选择字体</label>
            <select id="fontSel">
                <option value="黑体" selected>黑体</option>
                <option value="times">Times New Roman</option>
            </select>
        </div>
        
        <div class="form-group">
            <label>选择图片比例：</label>
            <div style="display: flex; gap: 20px;">
                <div>
                    <input type="radio" id="ratio3_4" name="ratio" value="3:4" checked>
                    <label for="ratio3_4">3:4</label>
                </div>
                <div>
                    <input type="radio" id="ratio4_3" name="ratio" value="4:3">
                    <label for="ratio4_3">4:3</label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>选择背景：</label>
            <div class="radio-group">
                <div class="radio-option">
                    <input type="radio" id="bgColor" name="bgType" value="color" checked>
                    <label for="bgColor">颜色背景</label>
                    <input type="color" id="colorPicker" value="#293931">
                </div>
                <div class="radio-option" style="margin-top: 15px;">
                    <input type="radio" id="bgImage" name="bgType" value="image">
                    <label for="bgImage">图片背景</label>
                </div>
            </div>
            
            <div id="bgSourceContainer" style="display: none;">
                <div class="radio-group" style="margin-left: 30px;">
                    <div class="radio-option">
                        <input type="radio" id="bgDefault" name="bgSource" value="default" checked>
                        <label for="bgDefault">默认背景</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="bgCustom" name="bgSource" value="custom">
                        <label for="bgCustom">自定义图片</label>
                    </div>
                </div>
            </div>
            
            <div id="imageUploadContainer" style="display: none; margin-top: 10px;">
                <div class="file-upload">
                    <label for="bgImageUpload">点击选择图片</label>
                    <input type="file" id="bgImageUpload" accept="image/*" style="display: none;">
                </div>
            </div>
        </div>
        
        <button id="generateBtn">生成图片</button>
        <div id="loading" class="loading">正在生成图片，请稍候...</div>
        <div id="error" class="error"></div>
        
        <div id="preview">
            <p>生成的图片将显示在这里</p>
        </div>
    </div>

    <script>
        // 显示/隐藏图片上传控件
        document.querySelectorAll('input[name="bgType"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const show = this.value === 'image';
                    document.getElementById('bgSourceContainer').style.display = show ? 'block' : 'none';
                    document.getElementById('imageUploadContainer').style.display = 
                        (show && document.querySelector('input[name="bgSource"]:checked').value === 'custom') ? 'block' : 'none';
                });

                document.querySelectorAll('input[name="bgSource"]').forEach(radio => {
                    radio.addEventListener('change', function() {
                        document.getElementById('imageUploadContainer').style.display = 
                            this.value === 'custom' ? 'block' : 'none';
                    });
                });
        });

        document.getElementById('generateBtn').addEventListener('click', async function() {
            const text = document.getElementById('textContent').value;
            const fontSize = document.getElementById('fontSize').value;
            const loadingElement = document.getElementById('loading');
            const errorElement = document.getElementById('error');
            const previewDiv = document.getElementById('preview');
            const fontSel=document.getElementById('fontSel').value;
            const bgType = document.querySelector('input[name="bgType"]:checked').value;
            const formData = new FormData();
            
                if (bgType === 'image') {
                    const bgSource = document.querySelector('input[name="bgSource"]:checked').value;
                    formData.append('bg_source', bgSource);
                    if (bgSource === 'custom') {
                        const imageFile = document.getElementById('bgImageUpload').files[0];
                        if (!imageFile) {
                            errorElement.textContent = '请选择背景图片！';
                            return;
                        }
                        formData.append('bg_img', imageFile);
                    }
            } else {
                formData.append('bg_color', document.getElementById('colorPicker').value);
            }
            
            // 清除之前的错误和预览
            errorElement.textContent = '';
            previewDiv.innerHTML = '<p>正在生成图片...</p>';
            
            if (!text.trim()) {
                errorElement.textContent = '请输入要添加到图片的文字！';
                return;
            }
            
            try {
                // 显示加载状态
                loadingElement.style.display = 'block';
                
                // 添加其他表单数据
                formData.append('text', text);
                formData.append('font_size', fontSize);
                formData.append('font', fontSel);
                formData.append('ratio', document.querySelector('input[name="ratio"]:checked').value);
                formData.append('bgType', bgType);
                
                // 调试信息
                console.log('FormData内容:');
                for (var pair of formData.entries()) {
                    console.log(pair[0] + ': ' + pair[1]);
                }
                
                // 发送请求到后端API
                const response = await fetch('/generate_xhs_image', {
                    method: 'POST',
                    body: formData
                });
                
                // 隐藏加载状态
                loadingElement.style.display = 'none';
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '生成图片失败');
                }
                
                // 获取图片数据并显示
                const blob = await response.blob();
                const imgUrl = URL.createObjectURL(blob);
                previewDiv.innerHTML = `
                    <h3>生成的图片</h3>
                    <img src="${imgUrl}" alt="生成的图片">
                    <p><a href="${imgUrl}" download="generated_image.png">点击下载图片</a></p>
                `;
                
            } catch (error) {
                loadingElement.style.display = 'none';
                errorElement.textContent = `错误: ${error.message}`;
                previewDiv.innerHTML = '<p>生成图片时出错</p>';
                console.error('生成图片错误:', error);
            }
        });
    </script>
</body>
</html>
